<template>
  <div class="home">
    <NavBar />
    <div class="main-content">
      <div class="image">
        <img src="../assets/homepage.png" alt="主页">
      </div>
      <div class="user-info">
        <div class="user-info-content">
          <div class="avatar">
            <img src="../assets/avatar.jpg" alt="头像">
          </div>
          <div class="user-details">
            <h3>{{ user.phoneNumber }}</h3>
          </div>
          <!-- 话费充值模块 -->
          <div class="recharge-module">
            <h3>话费充值</h3>
            <div class="recharge-form">
              <label for="phone-number">手机号:</label>
              <input type="text" id="phone-number" v-model="recharge.phoneNumber" placeholder="请输入手机号码" />
              <label for="recharge-plan">档位:</label>
              <select v-model="recharge.plan" id="recharge-plan">
                <option value="10元">10元</option>
                <option value="20元">20元</option>
                <option value="30元">30元</option>
                <option value="50元">50元</option>
                <option value="100元">100元</option>
                <option value="200元">200元</option>
                <option value="500元">500元</option>
                <!-- 可以在这里添加更多的充值档位 -->
              </select>
              <div class="recharge-amount">
                支付金额: <span>{{ recharge.plan }}</span>
              </div>
              <button @click="handleRecharge">立即充值</button>
              <!-- 支付方式选择 -->
              <div v-if="showPaymentOptions" class="payment-options">
                <button @click="selectPayment('支付宝')">支付宝</button>
                <button @click="selectPayment('微信')">微信</button>
              </div>
            </div>
          </div>
          <router-link to="/packagelist">
            <button>查看套餐列表</button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../components/NavBar.vue';
import axios from 'axios';

export default {
  name: 'HomePage',
  data() {
    return {
      user: {
        name: '',
        phoneNumber: ''
      },
      recharge: {
        phoneNumber: '',
        plan: '10元', // 默认选择10元
        amount: 10 // 默认充值金额为10元
      },
      showPaymentOptions: false,
      selectedPayment: null,
      banStatus: '', // 存储用户状态，0为正常，1为禁止
    };
  },
  components: {
    NavBar
  },
  created() {
    this.fetchUserInfo();
  },
  methods: {
    fetchUserInfo() {
      const token = localStorage.getItem('userToken');
      if (token) {
        axios.get('http://localhost:8081/users/info', {
          headers: {
            'Authorization': 'Bearer ' + token
          }
        })
            .then(response => {
              this.user.name = response.data.userName;
              this.user.phoneNumber = response.data.phoneNumber;
              this.banStatus = response.data.banStatus;
            })
            .catch(error => {
              console.error("Error fetching user info:", error);
            });
      }
    },
    handleRecharge() {
      // 确保amount是数字
      let amount = parseInt(this.recharge.plan.replace('元', '')) || 10; // 默认为10元，去除“元”字符
      if (isNaN(amount)) {
        alert('充值金额无效，请选择正确的充值档位。');
        return;
      }
      this.recharge.amount = amount;
      if (this.banStatus === '1') {
        alert('您的账号已被禁止充值，请联系客服！');
        return;
      }
      this.showPaymentOptions = true;
      // 检查是否选择了支付方式
      if (!this.selectedPayment) {
        alert('请选择支付方式');
        return;
      }
      // 发起充值请求
      const token = localStorage.getItem('userToken');
      if (token) {
        axios.put('http://localhost:8088/api/balance', {
          phoneNumber: this.recharge.phoneNumber,
          amount: this.recharge.amount.toString(), // 确保发送的是字符串
          paymentMethod: this.selectedPayment // 发送支付方式
        }, {
          headers: {
            'Authorization': 'Bearer ' + token
          }
        })
            .then(() => {
              alert('充值成功！');
            })
            .catch(error => {
              console.error("Error during recharge:", error);
              alert('充值失败，请稍后再试。');
            });
      } else {
        alert('请登录后进行充值！');
      }
    },
    selectPayment(paymentMethod) {
      this.selectedPayment = paymentMethod;
      this.showPaymentOptions = false; // 隐藏支付选项
    },
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-content {
  width: calc(100% - 2 * 12.5%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-left: 12.5%;
  padding-right: 12.5%;
}
.image {
  flex: 3;
}
.image img {
  width: 100%;
  height: auto;
}
.user-info {
  flex: 1;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
.user-info-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.avatar {
  margin-right: 20px;
}
.avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}
.user-details h3 {
  margin: 0;
}
.recharge-module {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  width: 100%;
  margin-top: 20px;
}
.recharge-module h3 {
  margin: 0 0 10px 0;
}
.recharge-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recharge-form label {
  margin-bottom: 5px;
}
.recharge-form input[type="text"],
.recharge-form select {
  padding: 10px;
  border: 10px solid #ccc;
  border-radius: 4px;
}
.recharge-amount {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}
.recharge-amount span {
  font-weight: bold;
}
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
button:hover {
  background-color: #0056b3;
}
a {
  display: inline-block;
  margin-top: 10px;
  color: #007bff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.payment-options {
  margin-top: 10px;
}
.payment-options button {
  margin-right: 10px;
}
</style>